<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>基于Java服务器端的消息主动推送技术揭秘</title>  
        <style type="text/css">  
            *{  
                margin:0;  
                padding:0;  
            }  
            body{background:#e2e2e2;}  
            .chatBox{  
                width:680px;  
                margin:0 auto;  
                text-align:center;  
            }  
            .chatBox h1{  
                font-size:30px;  
                color:#D29575;  
                margin-top:20px;  
            }  
            .tipBox{  
                text-align:left;  
                line-height:35px;  
            }  
            .inputText{height:30px;}  
            .chatContainer{  
                width:100%;  
                height:300px;  
                overflow:hidden;  
                text-align:left;  
                border:1px solid #000;  
            }  
            .sendBox{text-align:left;}  
            button{  
                height:30px;  
                width:80px;  
                color:#fff;  
                font-size:20px;  
                background:#2996A1;  
                margin:7px auto;  
                cursor:pointer;  
                outline:none;  
            }  
        </style>  
        <script type="text/javascript" src="js/public/jquery-3.1.1.min.js"></script>  
        <script type="text/javascript">  
            var ws;  
            var socketCreated = false;  
            var isLogout = false;  
            //页面一加载就执行  
            $(function(){  
                $("#sendBox").hide();  
                //判断浏览器是否支持WebSocket  
                if(window.WebSocket || window.MozWebSocket){  
                    $("#chatContainer").append("<span style='color:green;'>您的浏览器支持WebSocket，您可以尝试连接到聊天服务器！</span><br/>");  
                    $("#conUrl").val("192.168.2.160/myth/websocket/1/1");  
                }else{  
                    $("#chatContainer").append("<span style='color:red;'>浏览器不支持WebSocket，请更换浏览器！</span><br/>");  
                }  
                //绑定消息发送事件  
                $("#sendMsgBtn").click(function(){  
                    var msg = $("#msgContent").val().trim();  
                    if(msg != ""){  
                        ws.send($("#loginUser").val()+"说："+msg+"<br/>");  
                    }  
                    $("#msgContent").val("");  
                });  
                  
                //给连接按钮绑定点击事件  
                $("#conBtn").click(function(){  
                    //0：正在连接   1：已连接   2：正在关闭连接   3：已关闭连接  
                    if(socketCreated && (ws.readyState == 0 || ws.readyState == 1)){//已经连接了  
                        ws.send("<span style='color:blue;font-weight:bold'>["+$("#loginUser").val()+"]离开了聊天室...</span><br/>")  
                        socketCreated = false;  
                        isLogout = true;  
                        ws.close();//关闭连接  
                        $("#conBtn").html("连接");//修改按钮文字  
                        $("#sendBox").hide();  
                    }else{//还没连接  
                        //申请WebSocket对象  
                        if("WebSocket" in window){  
                            ws = new WebSocket("ws://"+$("#conUrl").val());   
                        }else if("MozWebSocket" in window){  
                            ws = new MozWebSocket("ws://"+$("#conUrl").val());  
                        }  
                        socketCreated = true;  
                        isLogout = false;  
                        $("#conBtn").html("断开");//修改按钮文字  
                          
                        //注册事件  
                        ws.onopen = wsOnOpen;//获得连接时  
                        ws.onmessage = wsOnMessage;//接收消息时  
                        ws.onclose = wsOnClose;//关闭连接时  
                        ws.onerror = wsOnError;//处理发生错误时(消息发送错误、连接错误)  
                    }  
                });  
            });  
              
            function wsOnOpen(){  
                ws.send("<span style='color:red;font-weight:bold'>["+$("#loginUser").val()+"]进入了聊天室...</span><br/>");  
                $("#sendBox").show();  
            }  
              
            function wsOnMessage(event){  
                $("#chatContainer").append(event.data);  
            }  
              
            function wsOnClose(){  
                  
            }  
              
            function wsOnError(){  
                $("#chatContainer").append("连接错误，请检查...<br/>");  
            }  
        </script>  
    </head>  
    <body>  
        <div class="chatBox">  
            <h1>基于Java服务器端的消息主动推送技术揭秘</h1>  
            <div class="tipBox">  
                服务器地址：<input type="text" class="inputText" id="conUrl" style="width:315px;" />  
                用户名：<input type="text" class="inputText" id="loginUser" value="Solin" style="width:190px;" />  
                <button type="button" id="conBtn">连接</button>  
            </div>  
            <div class="chatContainer" id="chatContainer"></div>  
            <div class="sendBox" id="sendBox">  
                <input type="text" class="inputText" style="width:588px;" id="msgContent" />  
                <button type="button" id="sendMsgBtn">发送</button>  
            </div>  
        </div>  
    </body>  
</html>  